<template>
    <div class="history-container">
      <div class="history-header">
        <h1>知识库</h1>
        <el-button type="primary" style="background: #5450cc" @click="open" size="default"
          >上传知识库文件</el-button
        >
      </div>
      <el-table :data="List" style="margin-top: 10px;text-align:center;"  align="center">
        <el-table-column label="文件名称" width="auto" property="name" />
        <el-table-column label="文件大小" width="auto" property="metadata">
          <template #default="{ row }">
            {{ row.metadata.file_size }}
          </template>
        </el-table-column>
        <el-table-column label="文件状态" width="auto" property="status">
          <template #default="{ row }">
            <el-tag :type="row.status == 'processed' ? 'success' : 'danger'">{{
              row.status == "processed" ? "解析成功" : "解析失败"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip width="auto">
          <template #default="{ row }">
            <el-button type="danger" @click="handleDelete(row)">
              <vab-icon icon="delete-bin-4-fill" />
              删除文件
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页组件 -->
      <el-pagination
        background
        :current-page="queryForm.page"
        :layout="layout"
        :page-size="queryForm.count"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
  
      <el-dialog v-model="bulkisshow" title="文件上传" @close="bulkclose">
        <el-upload
          name="file"
          :auto-upload="true"
          :show-file-list="false"
          :action="uploadaction"
          accept=".pdf, .ppt, .xls,.pptx,.docx,.xlsx,.doc"
          :on-success="handlesuccess"
          :headers="headers"
          style="display: inline-block"
        >
          <el-button type="primary"> 选择文件 </el-button>
        </el-upload>
        <div style="font-size: 14px; font-weight: 700; margin-top: 20px">
          <div>导入操作说明：</div>
          <!-- <div>1、下载数据模板，进行数据的整理</div> -->
          <div>1、选择整理好的文档进行导入</div>
          <div>注意事项：必须严格按照模板进行数据的填写</div>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted } from "vue";
  import { useRouter } from "vue-router";
  import { Calendar, Search, Star, EditPen, Delete } from "@element-plus/icons-vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { documentsList, deleteDocuments, upload } from "../api/home.js";
  
  const router = useRouter();
  const searchQuery = ref("");
  const total = ref(0);
  const queryForm = ref({
    page: 1,
    count: 10,
    name: "",
  });
  const layout = ref("total, sizes, prev, pager, next, jumper");
  const bulkisshow = ref(false);
  const headers = ref({
    Authorization: "Bearer " + localStorage.getItem("token"),
  });
  const uploadaction = ref("");
  const extraData = ref({
    collection_name: "default_collection",
    wait_for_processing: true,
  });
  
  // 历史记录数据
  const List = ref([]);
  
  const handleCurrentChange = (val) => {
    queryForm.value.page = val;
    getphrasesList();
  };
  
  const handleSizeChange = (val) => {
    queryForm.value.count = val;
    getphrasesList();
  };
  
  const bulkclose = () => {
    bulkisshow.value = false;
  };
  
  const open = () => {
    bulkisshow.value = true;
  };
  
  // 上传附件
  const handlesuccess = (res) => {
    if (res.code == 0) {
      getphrasesList();
      ElMessage.success("操作成功");
      bulkisshow.value = false;
    } else {
    }
  };
  
  const uploadFile = async (params) => {
    console.log(91);
    console.log(params);
    const formData = new FormData();
    formData.append("file", params.file);
  
    const res = await upload(formData);
    console.log(res);
  };
  
  // 获取列表
  const getphrasesList = async () => {
    const res = await documentsList(queryForm.value.page - 1, queryForm.value.count, {
      collection_name: "default_collection",
    });
    if (res.code == 0) {
      List.value = res.data.documents;
      total.value = res.data.document_count;
    } else {
      List.value = [];
    }
  };
  
  // 删除文件
  const handleDelete = (row) => {
    proxy.$baseConfirm("是否确定删除当前文件？", null, async () => {
      const res = await deleteDocuments(row.name);
      if (res.code == 0) {
        getphrasesList();
        ElMessage.success("操作成功");
      } else {
        ElMessage.error("操作失败");
      }
    });
  };
  
  onMounted(() => {
    if (import.meta.env.VITE_APP_BASE_API) {
      uploadaction.value = import.meta.env.VITE_APP_BASE_API + "/api/v0/kb/upload";
    } else {
      uploadaction.value = "/api/v0/kb/upload";
    }
    getphrasesList();
  });
  </script>
  
  <style scoped>
  .history-container {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;
    margin-top: 60px;
    font-family: Source Han Sans, Source Han Sans;
    font-weight: 700;
    font-size: 24px;
    color: #3d3d3d;
    line-height: 35px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  
  .history-header h1 {
    font-size: 24px;
    color: #333;
  }
  
  :deep().el-input__wrapper {
    padding: 8px 16px;
    border: 0 !important;
    border-radius: 20px;
    width: 425px;
    height: 40px;
    font-size: 14px;
  }
  
  :deep().el-input__wrapper:focus {
    outline: none;
  }
  
  :deep().el-button {
    outline: none !important;
  }
  
  .history-group {
    margin-bottom: 26px;
  }
  
  .date-header {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    text-align: left;
  }
  
  .history-item {
    /* display: flex;
      justify-content: space-between; */
    align-items: center;
    padding: 24px 20px;
    background: white;
    border: 1px solid #8cdcdc;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .history-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .item-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
  }
  
  .item-text {
    font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
    font-weight: 700;
    font-size: 14px;
    color: #333333;
    line-height: 14px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  
  .item-time {
    font-size: 12px;
    color: #999;
    align-items: center;
    display: flex;
  }
  
  .flex {
    display: flex;
  }
  
  .item-actions {
    display: flex;
    justify-content: space-between;
    font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
    font-weight: 400;
    font-size: 12px;
    color: #999999;
    line-height: 12px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-top: 10px;
  }
  
  .item-actions img {
    margin-left: 20px;
    width: 16px;
    height: 16px;
  }
  
  .action-btn {
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    color: #666;
    transition: color 0.3s ease;
  }
  
  .action-btn:hover {
    color: #1a73e8;
  }
  
  :deep().el-dialog__body {
    text-align: left;
  }
  </style>
  